<template> 
  <div> 
    <el-header>
      <div class="heade"> 
        <div class="title-left">
          <el-button
            size="large"
            @click.native="backtoHome" icon="el-icon-arrow-left"  plain>返回</el-button>  
        </div>        
        <div class="title">
          <h1>药品列表</h1> 
        </div>       
      </div>   
    </el-header>
    <div class="total-border">    
      <div class="heade"> 
        <input type="text" class="item" v-model="input" placeholder="搜索药品名称" @keydown.enter="onSearch()"/>
        <div class="item-search">
          <el-button
          @click.native="onSearch()" icon="el-icon-search" style="font-size: 18px" plain>搜索</el-button> 
        </div>
      </div>
      <div class="list-item">
        <el-table
        :show-header="false"
        :data="list"
        height="500"
        border
        style="width: 100%;font-size:15px">
          <el-table-column
            prop="name"
            label="药品名称"
            style="width: 33%">
          </el-table-column>
          <el-table-column
            prop="kcal"
            label="用药剂量"
            style="width: 33%"
            :formatter="formatter">
          </el-table-column>
          <el-table-column label="操作"  style="width: 33%">
            <template slot-scope="scope">
              <el-button
                size="medium"
                @click="handleEdit(scope.$index, scope.row)">添加</el-button> 
            </template>
          </el-table-column>
        </el-table>
      </div>       
    </div>
  </div>
</template> 
<script>
import { get } from "../ajax";
export default {
  name: "MedicineList",
  data() {
    return {
      list: [],
      input: ""
    };
  },
  async mounted() {
    const res = await get("/SmartMachine/api/Medicine/medicineList", {});
    this.list = res.data;
  },
  methods: {
    handleEdit(index, row) {
      const userId = this.$route.query.userId;
      const date = this.$route.query.date;
      const medicineId = row.id;
      this.$router.push({
        path: "/addMedicine",
        query: {
          userId: userId,
          date: date,
          medicineId: medicineId
        }
      });
    },

    formatter(row) {
      return row.amountPre + row.unit + `/次`;
    },

    async onSearch() {
      const res = await get("/SmartMachine/api/Medicine/search", {
        body: {
          name: this.input
        }
      });
      this.list = res.data;
    },

    backtoHome(){
      this.$router.push({
        path: "/medicine",
        query:{
          userId:this.$route.query.userId,
          date:this.$route.query.date,
        }
      })
    }
  }
};
</script> 
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  margin: 20px;
}
.heade {
  display: flex;
  margin-left: 130px;
  margin-bottom: 20px;
  text-align: center;
  border-radius: 15px;
}
.total-border {
  width: 97.5%;
  height: 600px;
  border: 1px solid #ccc;
  margin: 20px;
}
.item {
  flex: 0 0 70%;
  margin-top: 10px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 15px;
  height: 40px;
  display: inline-block;
  border-radius: 15px;
  line-height: 15px;
}
.item-search {
  flex: 0 0 10%;
  margin: 10px;
}
.list-item {
  margin: 8px;
}
.title {
  flex: 0 0 30%;
  margin-top: 20px;
  margin-left: 32%;
  font-size: 10px;
  line-height: 5px;
}
.table {
  width: 100%;
  height: 260px;
  font-size: 15px;
  border: 1px solid #ccc;
}
.title-left {
  margin-left: -20%;
}
</style> 
